<!DOCTYPE html>
<html lang="en" class="no-js" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>EasyBlog - 找回密码</title>
    <link rel="shortcut icon" th:href="@{/static/favicon.ico}"/>
    <link rel="bookmark" th:href="@{/static/favicon.ico}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="EasyBlog修改密码页面">
    <meta name="robots" content="noindex,nofollow">
    <!-- CSS -->
    <link rel="stylesheet" th:href="@{/static/css/login/reset.css}">
    <link rel="stylesheet" th:href="@{/static/css/login/supersized.css}">
    <link rel="stylesheet" th:href="@{/static/css/login/style.css}">
    <!-- Javascript -->
    <script th:src="@{/static/js/login/jquery-1.8.2.min.js}"></script>
    <script th:src="@{/static/js/login/supersized.3.2.7.min.js}"></script>
    <script th:src="@{/static/js/login/supersized-init.min.js}"></script>
    <script th:src="@{/static/js/message.js}"></script>
    <script th:src="@{/static/js/login/scripts.js}"></script>
    <script th:src="@{/static/js/easyblog.min.js}"></script>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>

<div id="reset-password" class="page-container">
    <h1>找回密码</h1>
    <form action="#" method="post">
        <input type="text" name="username" class="username" placeholder="手机号/邮箱" list="mails">
        <datalist id="mails"></datalist>
        <div>
            <input style="width: 50%" type="text" name="captchaCode" class="captchaCode" placeholder="验证码">
            <button id="code-btn" type="button" style="cursor: pointer;max-width: 35%;display: inline-block;">获取验证码
            </button>
        </div>
        <input type="password" name="password" class="password" placeholder="新密码">
        <button id="reset-password-submit" type="button">提 交</button>
        <span><span style="float: right"><a style="position: relative;top: 0"
                                            th:href="@{/user/login.html}">返回登录</a></span></span>
        <div class="error"><span>+</span></div>
    </form>
</div>

</body>
<script type="text/javascript">

    //倒计时的时间
    let maxtime = 60;
    let timeOut;

    $(function () {

        $('#code-btn').click(function () {
            let username = $('.username').val();
            let mail_reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
            let phone_reg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;
            if (username == '') {
                toast("请输入账号");
                $('form .username').focus();
                return false;
            }
            if (phone_reg.test(username)) {
                //判断是手机，就通过ajax异步请求给用户的这个手机发送验证码
                $.ajax({
                    url: "/user/phoneCaptchaCode",
                    type: "GET",
                    async: false,
                    data: {phone: username, option: "modify-pwd"},
                    dataType: "json",
                    success: function (response) {
                        let msg = response.message;
                        toast(msg);
                        timeOut = setInterval('countDown()', 1000);      //倒计时，并设置按钮不可用
                    },
                    error: function () {
                        toast("服务异常，请尝试重新输入手机号！");
                    }
                })
            } else if (mail_reg.test(username)) {
                //判断是邮箱，就通过ajax异步请求给用户的这个邮箱发送验证码
                $.ajax({
                    url: "/user/mailCaptchaCode",
                    type: "GET",
                    async: false,
                    data: {email: username, option: "modify-pwd"},
                    dataType: "json",
                    success: function (response) {
                        let msg = response.message;
                        toast(msg);
                        timeOut = setInterval('countDown()', 1000);   //倒计时，并设置按钮不可用
                    },
                    error: function () {
                        toast("服务异常，请重试！");
                    }
                })
            } else {
                toast('请输入正确的手机号或邮箱地址');
            }
        });
    });
</script>
</html>

